{% extends "layout.html" %}

{% load math %}
{% load percentage %}

{% block title %}Preservation planning{% endblock %}
{% block h1 %}Preservation planning{% endblock %}
{% block page_id %}preservation-planning{% endblock %}

{% block css %}
  <style type="text/css">

    td, th {
      border: 1px solid #eee;
      text-align: left;
    }

    thead > tr > th {
      background-color: #ddd;
    }

    td.file-type {
      font-size: 14px;
      vertical-align: top;
      background-color: #ddd;
      background: -moz-linear-gradient(100% 100% 90deg, #eee, #fff);
      background: -webkit-linear-gradient(#eee, #fff);
    }

    tr.row-header > th {
      background-color: #eee;
    }

    th.advanced {
      background-color: #ffedb7 !important;
    }

    td.advanced:first-child {
      border: 0;
    }

    #btn_advanced_details {
      font-weight: normal;
      float: right;
    }

    tr.hover > td {
      background-color: #ffedb7;
    }

    td.per {
      width: 40px;
      text-align: right;
    }

    th.per {
      text-align: center;
      width: 40px;
    }

  </style>
{% endblock %}

{% block js %}
  <script type="text/javascript">
    $(document).ready(function()
      {
        $advanced = $('.advanced').hide();
        $th = $('thead > tr > th:last');
        $('#btn_advanced_details').click(function(event)
          {
            event.preventDefault();

            var $sender = $(this);
            if ('Show advanced details' == $sender.text())
            {
              $advanced.show();
              $sender.text('Hide advanced details');
              $th.attr('colspan', 10);
            }
            else
            {
              $advanced.hide();
              $sender.text('Show advanced details');
              $th.attr('colspan', 5);
            }
          });

        $('tbody tr').hover(function()
          {
            $(this).addClass('hover');
          }, function()
          {
            $(this).removeClass('hover');
          });

        var link = '<a href="">Show</a>';

        $('td.cmd > div')
          .hide()
          .after(link).next().click(function(event)
            {
              event.preventDefault();

              if ('Show' == $(this).text())
              {
                var content = $(this).prev().clone();
                var width = $(this).closest('table').find('th:eq(1)').width();

                $(this)
                  .text('Hide')
                  .closest('tr').after('<tr><td colspan="5"></td></tr>').next().children().append(content).find('div')
                  .width(width)
                  .css({'overflow': 'scroll', 'padding': '4px', 'white-space': 'pre', 'font-family': 'courier', 'background-color': '#eee'})
                  .slideDown();

                var $header = $(this).closest('tr').prevAll('tr.row-header:first').find('td:first');
                $header.attr('rowspan', parseInt($header.attr('rowspan')) + 1);
              }
              else
              {
                $(this).closest('tr').next().remove();
                $(this).text('Show');

                var $header = $(this).closest('tr').prevAll('tr.row-header:first').find('td:first');
                $header.attr('rowspan', parseInt($header.attr('rowspan')) - 1);
              }
            });

        /* Not enough data yet in the database to build the dialog
        $('td.ext').not(':contains(None)').wrapInner(document.createElement('a')).children().attr('href', '#').click(function(event)
          {
            event.preventDefault();

            $('<p>Dialog in progress...</p>').dialog({
              buttons:
                {
                  'Close': function()
                    {
                      $(this).dialog('close');
                    }
                },
              title: $(this).text() + ' - ' + 'format normalization policy',
              width: 640,
              height: 480
            });
          });
        */
      });
  </script>
{% endblock %}

{% block content %}
  <table>
    <thead>
      <tr>
        <th>Media type</th>
        <th colspan="5">
          <a id="btn_advanced_details" href="">Show advanced details</a>
        </th>
      </tr>
    </thead>
    <tbody>
      {% for item in file_types %}
        <tr class="row-header">
          <td class="file-type" rowspan="{{ item.extensions|length|math:"$1 + 1" }}">
            {% if item.url %}
              <a href="{{ item.url }}" target="_blank">
            {% endif  %}
            {% ifequal item.type None %}
              Undefined
            {% else %}
              {{ item.type }}
            {% endifequal %}
            {% if item.url %}
              </a>
            {% endif  %}
          </td>
          <th>Extension</th>
          <th>Normalization description</th>
          <th class="advanced">Command type</th>
          <th class="advanced per"><img src="/media/images/accept.png" title="Successful"  /></th>
          <th class="advanced per"><img src="/media/images/delete.png" title="Unsuccessful" /></th>
          <th class="advanced per"><img src="/media/images/error.png" title="Frozen/processing" /></th>
          <th>Command</th>
          <th>Purpose</th>
        </tr>
        {% for extension in item.extensions %}
          <tr>
            <td class="ext">{{ extension.1 }}</td>
            <td>{{ extension.9 }}</td>
            <td class="advanced">{{ extension.3 }}</td>
            <td class="advanced per">{{ extension.5|percentage:extension.4|safe }}</td>
            <td class="advanced per">{{ extension.6|percentage:extension.4|safe }}</td>
            <td class="advanced per">{{ extension.7|percentage:extension.4|safe }}</td>
            <td class="cmd"><div>{{ extension.10 }}</div></td>
            <td>{{ extension.2 }}</td>
          </tr>
        {% endfor %}
      {% endfor %}
    </tbody>
  </table>
{% endblock %}
